import React, { Component } from 'react';
import { connect } from "react-redux";
import { Table, Modal, Popconfirm, Image, message } from 'antd';
import AddLabel from './component/AddLabel'
class LabelList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pageNum: 1,
            pageSize: 10,
            userName: '',
            email: '',
            gender: '',
            phone: '',
            startTime: '',
            endTime: '',
            visible: false,
            record: {},
            type: '',
            img: '',

        }

        this.columns = [

            {
                title: 'ID',
                dataIndex: 'id',
                width: 70

            },
            {
                title: '技能名称',
                dataIndex: 'caption',
                width: 200
            },
            {
                title: '推荐',
                dataIndex: 'showIndex',
                width: 200,
                render: (_, record) => {
                    return (
                        <div style={{color:record.showIndex===1&&record.owner !== '0'?'red':''}}>
                            {record.showIndex === 1&&record.owner !== '0'? '是' : '否'}
                        </div>
                    )
                }
            },
            {
                title: '技能类型',
                dataIndex: 'parentName',
                width: 200,
                render: (_, record) => {
                    return (
                        <div style={{color:record.owner==='0'?'red':''}}>
                            {record.owner === '0'? '一级分类' : _}
                        </div>
                    )
                }
            },
            {
                title: '备注',
                dataIndex: 'remarks',
                width: 200,
                render: (_, record) => {
                    return (
                        <div>
                            {record.remarks === "undefined" ? '' : record.remarks}
                        </div>
                    )
                }


            },
            {
                title: '图标',
                dataIndex: 'icon',
                width: 150,
                render: (_, record) => record.icon ? <div ><Image style={{ width: 50, height: 50 }} src={record.icon} /> </div> : null

            },
            {
                title: '底部背景',
                dataIndex: 'icon',
                width: 150,
                render: (_, record) => record.bgImg ? <div ><Image style={{ width: 50, height: 50 }} src={record.bgImg} /> </div> : null

            },
            {
                title: '排序',
                dataIndex: 'orderNum',
                width: 70

            },
            {
                title: '添加人',
                dataIndex: 'addBy',
            },
            {
                title: '时间',
                dataIndex: 'addTime',
            },
            {
                title: '操作',
                // dataIndex: 'addTime',
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.updateLabel(record)}>编辑</a>
                            <Popconfirm
                                title="确定删除吗？"
                                onConfirm={() => this.delCateTag(record)}
                                okText="删除"
                                cancelText="取消"
                            >
                                <a style={{ marginLeft: 30 }} >删除</a>
                            </Popconfirm>
                        </div>
                    )
                }
            },


        ];
    }
    componentDidMount() {
        this.init();



    }
    handleCancel = () => {
        this.props.clear()
        this.setState({
            visible: false
        })
    }

    init = () => {
        const { list } = this.props
        list({ page: 1, size: 10 })
    }

    handleChangeLabelList = (current, pageSize) => {
        this.props.list({ page: current, size: 10 })
    }
    updateLabel = (record) => {

        this.setState({ visible: true, record, type: '1' })
    }
    delCateTag = (record) => {
        this.props.delCateTag({ id: record.id }).then(res => {
            this.props.list({ page: 1, size: 10 })
        })
        message.success('删除成功')
    }
    render() {
        const { updateListData,  userLoading,parent } = this.props;
        const {  visible, record, type } = this.state;

        const pagination = {
            current: updateListData.current,//当前页
            total: updateListData.total,//总条数
            pageSize: updateListData.size,//页大小
            onChange: this.handleChangeLabelList,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Table columns={this.columns} scroll={{ y: 625 }}
                    loading={userLoading} dataSource={updateListData.records} rowKey={record => record.id} pagination={pagination}
                />
                <div>
                    <Modal destroyOnClose visible={visible} title={type === '0' ? "新增" : '编辑'} footer={null} onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <AddLabel handleCancel={this.handleCancel} record={record} type={type} parent={parent}></AddLabel>
                    </Modal>
                </div>
            </div>

        );
    }
}


const mapState = state => ({
    ...state.label
});

const mapDispatch = dispatch => ({
    ...dispatch.label

})

export default connect(mapState, mapDispatch)(LabelList);